<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <img id="myImage">
</body>

<script>
  var img = document.getElementById("myImage");

  function detectShapesOnImageUrl(detector, url) {
    var detector = eval('new ' + detector + '()');
    console.log(detector);
    img.onload = function() {
      console.log('image loaded');
      var results = "";
      detector.detect(img)
        .then(detectedObjects => {
          console.log('something detected');
          for (var i = 0; i < detectedObjects.length; i++) {
            var boundingBox = detectedObjects[i].boundingBox;
            var result = boundingBox.x + "," + boundingBox.y + "," +
                         boundingBox.width + "," + boundingBox.height;
            results += result + "#";
          }
          window.domAutomationController.send(results);
        })
        .catch(error => {
          console.error(error.message);
          window.domAutomationController.send(error.message);
        });
    }
    img.src = url;
  }
  </script>
</html>
